import React, { Component } from 'react'
import { Breadcrumb,Table,Modal} from 'antd';
import { connectRouter } from '../../../mixins/router';
import history from '../../../history'
import api from '../../../api/api';
import { testPermission } from '../../common/HasPermission';
import { Link } from 'react-router-dom';
import './GroupPayOrderDetail.less';



class GroupOrderInsurance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id:'',
            payOrderDetail:{
                logs:[]
            }
        }
    }
    async componentDidMount(){
        let id = this.props.router.query.id
        if(id){
            let payOrderDetail = await api.getGroupInsurancePaymentDetail(id)
            console.log('payOrderDetail:',payOrderDetail)
            this.setState({
                id,
                payOrderDetail
            })
        }else{
            this.goBack()
        }

    }


    goBack=()=>{
        if (this.props.router.query.r && this.props.router.query.r.indexOf('/GroupPayOrderList') === 0) {
            history.push(this.props.router.query.r)
        } else {
            history.push('/GroupPayOrderList')
        }
    }

    // 下载待缴费会员清单
    downloadMemberList=(record)=>{
        // 获取缴费单id
        let id = this.state.id
        window.open(`/_api/groupInsurance/payment/${id}/groupOrderBillInfo/${record.groupOrderBillId}/paymentMemberDownload`,'_blank')
    }
    // 下载待退保会员清单
    downloadRevokeMemberList=(record)=>{
        console.log('record:',record)
        let id = this.state.id
        window.open(`/_api/groupInsurance/payment/${id}/groupOrderBillInfo/${record.groupOrderBillId}/revokeMemberDownload`,'_blank')
    }


    submitToService= async(record)=>{
        // 提交缴费清单
        let id = this.state.id
        try{
            // 不报错就是提交成功
            await api.singlePutGroupInsurance(id,record.groupOrderBillId)
            Modal.success({
                title:'提交结果',
                content:'上传成功',
                onOk:()=>{
                    this.goBack()
                }
            })
        }catch(e){
            Modal.error({
                title:'提交结果',
                content:'提交失败',
                okText:'确定'
            })
        }

    }

    submit=(record)=>{
        let self = this
        Modal.confirm({
            title:'提交确认',
            content:'提交后无法回退，是否提交？',
            okText:'确定',
            cancelText:'取消',
            onOk() {
                self.submitToService(record)
            },
            onCancel() {
            },
        })
    }

    get backToIndex() {
        if (this.props.router.query.r && this.props.router.query.r.indexOf('/GroupPayOrderList') === 0) {
          return this.props.router.query.r;
        } else {
          return '/GroupPayOrderList';
        }
      }

    render() {
        const { payOrderDetail } = this.state;
        return (
            <div className="group-pay">
                <Breadcrumb className="breadcrumb-box">
                    <Breadcrumb.Item>
                        <Link to={this.backToIndex}>缴费管理列表</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>缴费详情</Breadcrumb.Item>
                </Breadcrumb>
                <div className="gpay-detail">
                    <div className="gpay-d-title">缴费单号：{payOrderDetail.sequenceNo}</div>
                    <div className="gpay-d-basic">
                        <div>缴费单号：{payOrderDetail.sequenceNo}</div>
                        <div>操作人：{payOrderDetail.operName}</div>
                        <div>操作时间：{payOrderDetail.operDate}</div>
                    </div>
                    <div className="gpay-d-title">缴费清单</div>
                    <div className="gpay-d-list">
                        <div className="gpay-d-list-title">
                            <div>团险订单数：{ payOrderDetail.orderCount }</div>
                            <div>总缴费会员数：{ payOrderDetail.overallCount }</div>
                            <div>总退保会员数：{ payOrderDetail.overallReturnCount }</div>
                        </div>
                        <Table dataSource={payOrderDetail.details} pagination={false} rowKey="sequenceNo">
                            <Table.Column title="保单号" dataIndex="sequenceNo" key="sequenceNo"></Table.Column>
                            <Table.Column title="投保产品(代码)" dataIndex="product" key="product"></Table.Column>
                            <Table.Column title="续费期数" dataIndex="period" key="period"></Table.Column>
                            <Table.Column title="缴费时间" dataIndex="payDate" key="payDate"></Table.Column>
                            <Table.Column title="已缴费会员数" dataIndex="count" key="count"></Table.Column>
                            <Table.Column title="已退保会员数" dataIndex="returnCount" key="returnCount"></Table.Column>
                            <Table.Column title="缴费会员" dataIndex="groupOrderId" key="groupOrderId"
                                render={(text,record)=>{
                                    return <span className="downLink" style={{color:'blue',textDecoration:'underline',cursor:'pointer'}} onClick={()=>{ this.downloadMemberList(record)}}>缴费会员清单.xls</span>
                                }}
                            ></Table.Column>
                            <Table.Column title="退保会员" dataIndex="" key=""
                                render={(text,record)=>{
                                    return <span className="downLink" style={{color:'blue',textDecoration:'underline',cursor:'pointer'}}  onClick={()=>{ this.downloadRevokeMemberList(record)}}>退保会员清单.xls</span>
                                }}
                            ></Table.Column>
                            <Table.Column title="状态" dataIndex="success" key="success"
                                render={(text,record)=>{
                                    return record.success ? '成功':'失败'
                                }}>

                            </Table.Column>
                            <Table.Column title="操作"
                                render={(text,record)=>{
                                    return record.success  ? '': (testPermission('groupInsurance.payment') ? <span onClick={()=>{ this.submit(record) }} style={{cursor:'pointer',textDecoration:'underline'}}>提交</span> : '')
                                }}>

                            </Table.Column>
                        </Table>
                    </div>
                    <div className="gpay-d-title">缴费流水</div>
                    <div className="gpay-d-done">
                        {
                            Array.isArray(payOrderDetail.logs) && payOrderDetail.logs.map((item,index)=>{
                                return <div key={index}>{item.date}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{item.content}</div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default connectRouter(GroupOrderInsurance);
